<div class="oppia-state-editor-header">
  <div class="oppia-state-name-container">
    <h4 ng-if="!stateNameEditorIsShown" ng-click="openStateNameEditor()" class="oppia-editable">
      <[stateName]>
      <i class="icon-pencil" title="Edit State Name"></i>
    </h4>

    <span ng-if="stateNameEditorIsShown" class="form-horizontal">
      <input type="text" ng-model="$parent.tmpStateName" autofocus>
      <button type="button" class="btn" ng-click="saveStateNameAndRefresh($parent.tmpStateName)">Close</button>
    </span>
  </div>
</div>

<hr>

<div class="oppia-state-editor-body">
  <div class="container-fluid oppia-editor" ng-show="stateName">
    {% include 'editor/state_editor_param.html' %}
    <hr>
    {% include 'editor/state_editor_content.html' %}
    <div ng-controller="InteractiveWidgetEditor">
      {% include 'editor/state_editor_interaction.html' %}
      {% include 'editor/state_editor_widget_sticky.html' %}
      <hr>
      {% include 'editor/state_editor_rules.html' %}
    </div>
    <br>
    <hr>
    {% include 'editor/state_reader_feedback.html' %}
    <br>
    {% include 'editor/unresolved_answers.html' %}
    <br>
    <hr>
    {% include 'editor/state_editor_footer.html' %}
  </div>
</div>
